<template>
  <div class="theme-switch" @click="toggleTheme">
    <el-icon v-if="isDarkMode"><Moon /></el-icon>
    <el-icon v-else><Sunny /></el-icon>
  </div>
</template>

<script setup>
import { Moon, Sunny } from '@element-plus/icons-vue'
import { useTheme } from '@/hooks/useTheme'

// 使用主题管理hook
const { isDarkMode, toggleTheme } = useTheme()
</script>

<style lang="scss" scoped>
.theme-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--header-text-color);
  transition: all 0.3s;
  
  &:hover {
    background-color: var(--header-item-hover);
  }
}
</style> 